import React, { useEffect, useRef, useState } from 'react';
import PageTitle from '@/components/PageTitle';
import { Button, Input, message, Modal, Select, Typography } from 'antd';
import Tables from '@/hoc/Tables';
import styles from './index.less';
import { connect, history } from 'umi';
import { WORKS_LIST } from '@/services/list';
import PageInfoSearch from '@/components/PageInfoSearch';
import { getdownLoadUrl } from '@/services/file';
import { deleteWorksInfo } from '@/services/addworks';
import { GenericProps, TableProps } from '@/global.d';

const { Option } = Select;
const { Text } = Typography;

interface DeliveryProps extends GenericProps {
  type?: number;
}

const Delivery: React.FC<DeliveryProps> = props => {
  const childRef = useRef<TableProps | any>();
  let workType: string[] = ['已上传', '已投稿', '已入围'];
  let { userData, dispatch, type = 0 } = props;
  let columns: any[] = [
    {
      title: '词条序号',
      dataIndex: 'entryId',
      key: 'key',
      render: (_: any, text: any) => <span>{text?.worksInfo?.entryId}</span>,
      width: 120,
    },
    {
      title: '印面',
      dataIndex: 'workStatus',
      key: 'workStatus',
      width: 100,
      render: (_: any, text: any) => {
        let id: string = text?.worksPicture?.find((el: any) => el.pictureKey == 'printing')?.pictureId;
        return id ? <img src={getdownLoadUrl(id)} alt="图片错误" style={{ width: 80, height: 80 }} /> : null;
      },
    },
    {
      title: '印面释文',
      dataIndex: 'printingAnnotations',
      key: 'printingAnnotations',
      render: (_: any, text: any) => <span>{text?.worksInfo?.printingAnnotations}</span>,
    },
    {
      title: '作品状态',
      dataIndex: 'workStatus',
      key: 'workStatus',
      render: (_: any, text: any) => <span>{workType[text?.worksInfo?.workStatus] ?? '--'}</span>,
    },
    {
      title: '投稿的展览',
      dataIndex: 'courierNumber1',
      key: 'courierNumber1',
      render: (_: any, text: any) => <span>{text?.exhibitionName ?? '--'}</span>,
    },
    {
      title: '操作',
      width: 250,
      render: (_: any, item: any) => (
        <div className="operation">
          <span onClick={() => onEdit(item)}>查看</span>
          <span onClick={item?.worksInfo?.workStatus == 0 ? () => onisDis(item) : undefined}>
            <Text disabled={item?.worksInfo?.workStatus == 0 ? false : true}>编辑</Text>
          </span>

          <span onClick={item?.worksInfo?.workStatus != 0 ? undefined : () => onDetil(item)}>
            <Text disabled={item?.worksInfo?.workStatus != 0 ? true : false}>删除</Text>
          </span>
          {type ? (
            ''
          ) : (
            <span onClick={item?.worksInfo?.workStatus > 0 ? () => onDetilCheck(item) : undefined}>
              <Text disabled={item?.worksInfo?.workStatus > 0 ? false : true}>评审详情</Text>
            </span>
          )}
        </div>
      ),
    },
  ];
  const [courierNumber, setCourierNumber] = useState<string>('');
  const [workStatus, setWorkStatus] = useState<any>(undefined);
  let work: string[] = ['未投稿', '已投稿', '评审中', '待修改', '已入围'];

  /**
   * 查看
   */
  const onEdit = (item: any) => {
    history.push(`${location?.pathname}/add?id=${item?.worksInfo?.id}&disableds=true`);
  };

  /**
   * 评审详情
   * @param item
   */
  const onDetilCheck = (item: any) => {
    history.push(`/management/works/addcheck/add?id=${item?.worksInfo?.id}`);
  };

  /**
   * 删除
   */
  const onDetil = (item: any) => {
    Modal.confirm({
      title: '删除提示',
      content: '确定要删除此项作品吗？',
      okText: '确定',
      cancelText: '取消',
      onOk() {
        deleteWorksInfo({ id: item?.worksInfo?.id }).then((res: any) => {
          if (res?.responseCode == 200) {
            message.success('作品删除成功');
            childRef.current.setQuery({});
          }
        });
      },
    });
  };

  /**
   * 编辑
   */
  const onisDis = (item: any) => {
    history.push(`${location?.pathname}/add?id=${item?.worksInfo?.id}`);
  };

  /**
   * 添加用户
   */
  const adddelivery = () => {
    history.push(`${location?.pathname}/add`);
  };

  /**
   * 初始页面store为空
   */
  useEffect(() => {
    dispatch({
      type: 'addworks/fetch',
    });
  }, []);

  return (
    <div className={styles.regimePage}>
      <PageTitle title={'我的作品'} />
      <PageInfoSearch addfn={type ? undefined : adddelivery}>
        <Select onChange={e => setWorkStatus(e)} placeholder="请选择作品状态" style={{ width: 160, marginRight: 20 }} allowClear>
          {work.map((el, index) => (
            <Option value={index} key={`${el}_12313_id_key`}>
              {el}
            </Option>
          ))}
        </Select>
        <Input style={{ width: 280 }} onChange={e => setCourierNumber(e.target.value)} placeholder="请输入作品关键词" allowClear />
        <Button
          onClick={() => {
            childRef.current.setQuery({});
          }}
          style={{ marginLeft: 20 }}
          className="btn_cold">
          查询
        </Button>
      </PageInfoSearch>
      <div className="regime_table">
        <Tables option={{ keyWord: courierNumber, workStatus, workType: type, userId: userData?.id }} childRef={childRef} url={WORKS_LIST} columns={columns} />
      </div>
    </div>
  );
};

export default connect(({ login, addworks }: { [index: string]: any }) => ({
  userData: login.userData,
}))(Delivery);
